<template>
  <div>
    <div id="luckysheet" class="luckysheet-content"></div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    sheetParams: {},
  },
  data() {
    return {
      options: {
        container: "luckysheet", // 设定DOM容器的id
        title: "", // 设定表格名称
        lang: "zh", // 设定表格语言
        // 更多其他设置...
        showinfobar: false, //是否显示顶部信息栏
        showsheetbar: true, //是否显示自定义底部sheet页
        showtoolbar: false,
        enableAddRow: false, //添加行功能
        enableAddBackTop: false, //回到顶部
        allowUpdate: false, //允许更新
        sheetFormulaBar: false,
        showsheetbarConfig: {
          add: false, //新增sheet
          menu: false, //sheet管理菜单
          sheet: true, //sheet页显示
        },
        showstatisticBarConfig: {
          count: false, // 计数栏
          view: false, // 打印视图
          zoom: false, // 缩放
        },
        cellRightClickConfig: {
          copy: false, // 复制
          copyAs: false, // 复制为
          paste: false, // 粘贴
          insertRow: false, // 插入行
          insertColumn: false, // 插入列
          deleteRow: false, // 删除选中行
          deleteColumn: false, // 删除选中列
          deleteCell: false, // 删除单元格
          // hideRow: false, // 隐藏选中行和显示选中行
          // hideColumn: false, // 隐藏选中列和显示选中列
          rowHeight: false, // 行高
          columnWidth: false, // 列宽
          clear: false, // 清除内容
          matrix: false, // 矩阵操作选区
          // sort: false, // 排序选区
          // filter: false, // 筛选选区
          chart: false, // 图表生成
          image: false, // 插入图片
          link: false, // 插入链接
          data: false, // 数据验证
          cellFormat: false, // 设置单元格格式
        },
        data: [
          // {
          //   name: "投运", //工作表名称
          //   // color: "", //工作表颜色
          //   index: 0, //工作表索引-【唯一值】
          //   status: 1, //激活状态
          //   order: 0, //工作表的下标-【顺序】
          //   // hide: 0, //是否隐藏
          //   // row: 36, //行数
          //   // column: 18, //列数
          //   // defaultRowHeight: 19, //自定义行高
          //   defaultColWidth: 100, //自定义列宽
          //   filter_select: {
          //     row: [0, 60], //高，从0开始-1
          //     column: [0, 2], //宽，从0开始-1
          //   },
          //   // celldata: [
          //   //   {
          //   //     r: 0,
          //   //     c: 0,
          //   //     v: {
          //   //       ct: { fa: "General", t: "g" },
          //   //       m: "value1",
          //   //       v: "value1",
          //   //     },
          //   //   },
          //   //   {
          //   //     r: 0,
          //   //     c: 1,
          //   //     v: {
          //   //       ct: { fa: "General", t: "g" },
          //   //       m: "value2",
          //   //       v: "value2",
          //   //     },
          //   //   },
          //   // ], //初始化使用的单元格数据
          //   config: {
          //     // merge: {}, //合并单元格
          //     // rowlen: {}, //表格行高
          //     // columnlen: {}, //表格列宽
          //     // rowhidden: {}, //隐藏行
          //     // colhidden: {}, //隐藏列
          //     // borderInfo: {}, //边框
          //     authority: {
          //       //当前工作表的权限配置
          //       // selectLockedCells: 1, //选定锁定单元格
          //       // selectunLockedCells: 1, //选定解除锁定的单元格
          //       // formatCells: 1, //设置单元格格式
          //       // formatColumns: 1, //设置列格式
          //       // formatRows: 1, //设置行格式
          //       // insertColumns: 1, //插入列
          //       // insertRows: 1, //插入行
          //       // insertHyperlinks: 1, //插入超链接
          //       // deleteColumns: 1, //删除列
          //       // deleteRows: 1, //删除行
          //       // sort: 1, //排序
          //       // filter: 1, //使用自动筛选
          //       // usePivotTablereports: 1, //使用数据透视表和报表
          //       // editObjects: 1, //编辑对象
          //       // editScenarios: 1, //编辑方案
          //       sheet: 1, //如果为1或true，则该工作表受到保护；如果为0或false，则该工作表不受保护。
          //       hintText: "不可编辑", //弹窗提示的文字
          //       // algorithmName: "None", //加密方案：MD2,MD4,MD5,RIPEMD-128,RIPEMD-160,SHA-1,SHA-256,SHA-384,SHA-512,WHIRLPOOL
          //       // saltValue: null, //密码解密的盐参数，为一个自己定的随机数值
          //       // allowRangeList: [
          //       //   {
          //       //     //区域保护
          //       //     name: "area", //名称
          //       //     password: "1", //密码
          //       //     hintText: "", //提示文字
          //       //     algorithmName: "None", //加密方案：MD2,MD4,MD5,RIPEMD-128,RIPEMD-160,SHA-1,SHA-256,SHA-384,SHA-512,WHIRLPOOL
          //       //     saltValue: null, //密码解密的盐参数，为一个自己定的随机数值
          //       //     sqref: "$C$1:$D$5", //区域范围
          //       //   },
          //       // ],
          //     }, //工作表保护
          //   },
          //   // scrollLeft: 0, //左右滚动条位置
          //   // scrollTop: 0, //上下滚动条位置
          //   // luckysheet_select_save: [], //选中的区域
          //   // calcChain: [], //公式链
          //   // isPivotTable: false, //是否数据透视表
          //   // pivotTable: {}, //数据透视表设置
          //   // filter_select: {}, //筛选范围
          //   // filter: null, //筛选配置
          //   // luckysheet_alternateformat_save: [], //交替颜色
          //   // luckysheet_alternateformat_save_modelCustom: [], //自定义交替颜色
          //   // luckysheet_conditionformat_save: {}, //条件格式
          //   // frozen: {}, //冻结行列配置
          //   // chart: [], //图表配置
          //   // zoomRatio: 1, // 缩放比例
          //   // image: [], //图片
          //   // showGridLines: 1, //是否显示网格线
          //   // dataVerification: {}, //数据验证配置
          // },
          // {
          //   name: "待投运",
          //   index: 1,
          //   status: 0,
          //   order: 1,
          //   // row: 36, //行数
          //   // column: 18, //列数
          //   defaultColWidth: 100, //自定义列宽
          //   config: {
          //     authority: {
          //       sheet: 1, //如果为1或true，则该工作表受到保护；如果为0或false，则该工作表不受保护。
          //       hintText: "不可编辑", //弹窗提示的文字
          //     },
          //   },
          // },
          // {
          //   name: "feiqi",
          //   index: 1,
          //   status: 0,
          //   order: 1,
          //   // row: 4, //行数
          //   // column: 4, //列数
          //   defaultColWidth: 100, //自定义列宽
          //   config: {
          //     authority: {
          //       sheet: 1, //如果为1或true，则该工作表受到保护；如果为0或false，则该工作表不受保护。
          //       hintText: "不可编辑", //弹窗提示的文字
          //     },
          //   },
          // },
        ],
      },
    };
  },
  mounted() {
    this.initLuckysheet();
  },
  methods: {
    initLuckysheet() {
      if (this.sheetParams.length) {
        this.optionData();
        this.options.hook = {
          workbookCreateAfter: () => {
            for (let i = 0; i < this.sheetParams.length; i++) {
              const {
                excelHeader = [],
                excelData = {},
                fontColorArr = [],
              } = this.sheetParams[i];
              this.dataRendSheet(excelHeader, excelData, i, fontColorArr);
            }
          },
          sheetMouseup: (params, position, array) => {
            this.$emit("showDialog", { params, position, array });
          },
        };
      }
      luckysheet.create(this.options);
    },
    optionData() {
      // 设置指定筛选行列
      // 设置行数、列数
      this.sheetParams.forEach((item, index) => {
        let configData = item.configData;
        console.log(configData.row);
        let row = [0, configData.row];
        let column = [0, configData.column];
        let obj = {
          name: configData.name, //工作表名称
          index: index, //工作表索引-【唯一值】
          status: configData.status, //激活状态
          order: index, //工作表的下标-【顺序】
          defaultColWidth: configData.defaultColWidth, //自定义列宽
          row: configData.row, //行数
          column: configData.column, //列数
          filter_select: {
            row: [0, 6], //高，从0开始-1
            column: [0, 3], //宽，从0开始-1
          },
          config: {
            authority: {
              sheet: 1, //如果为1或true，则该工作表受到保护；如果为0或false，则该工作表不受保护。
              hintText: "不可编辑", //弹窗提示的文字
            }, //工作表保护
          },
        };
        this.options.data.push(obj);
      });
    },
    /**接口数据回显 */
    dataRendSheet(excelHeader, excelData, sheet, fontColorArr) {
      //回显表格表头，第一行
      if (excelHeader.length > 0) {
        excelHeader.forEach((item1, index1) => {
          luckysheet.setCellValue(0, index1, item1, {
            order: sheet,
            isRefresh: false,
          });

          //普通回显数据
          if (JSON.stringify(excelData) != "{}") {
            excelData[item1].forEach((item2, index2) => {
              var row = index2 + 1;
              luckysheet.setCellValue(row, index1, item2, {
                order: sheet,
                isRefresh: false,
              });
              // 指定列改变颜色及下划线
              if (fontColorArr.length > 0) {
                fontColorArr.forEach((item) => {
                  item.cArr.forEach((i) => {
                    luckysheet.setCellFormat(
                      row,
                      i,
                      "bd",
                      {
                        borderType: "border-horizontal",
                        style: "1",
                        color: "rgb(1, 144, 138)",
                      },
                      {
                        order: item.sheet,
                      }
                    );
                    luckysheet.setCellFormat(row, i, "fc", "rgb(1, 144, 138)", {
                      order: item.sheet,
                    });
                  });
                });
              }
            });
          }
        });
      }
    },
  },
};
</script>
<style lang="css" scoped>
.luckysheet-content {
  margin: 0px;
  padding: 0px;
  position: absolute;
  width: 100%;
  height: 500px;
  left: 0px;
  top: 40px;
  bottom: 0px;
}
</style>
